<template>
  <div>
    <!-- {{  }}  双大括号绑定 -->
    <h1>{{ msg }}</h1>
    <h1>{{ msg2 }}</h1>
    <!-- 表达式 -->
    <h1>{{ count * 2 }}</h1>
    <!-- 调用函数 -->
    <h1>{{ doSomething('msg') }}</h1>

    <!-- 指令绑定 -->
    <h2 v-text="msg"></h2>
    <h2 v-html="msg2"></h2>

    <!-- v-bind 绑定属性 -->
    <img src="https://img1.baidu.com/it/u=1893866658,1687958014&fm=253&app=138&f=JPEG?w=800&h=1067" alt="" />
    <img v-bind:src="imgSrc" alt="" />
    <img :src="imgSrc" alt="" />

    <!-- v-on 绑定事件-->
     <button v-on:click="clickMe">点我</button>
     <button @click="clickMe">点我</button>
     <h1>{{ number }}</h1>
     <button @click="clickMe10(10)">点我</button>


     <!-- 绑定class -->
      <h1 class="title" :class="{ active: isActive }">法外狂徒张三</h1>
      <button @click="changeActive">改变状态</button>


      <!-- 绑定style -->
       <h1 style="color: blue;">style绑定</h1>
       <h1 :style="styleObj">style绑定</h1>


       <!-- v-if v-else-if v-else 条件渲染 -->
       <h1 v-if="source < 60">不及格</h1>
       <h1 v-else-if="source >= 60 && source < 80">良好</h1>
       <h1 v-else>优秀</h1>
       <button @click="changeSource">改变分数</button>

       <!-- v-show -->
      <h1 v-show="source < 60">不及格</h1>
      <h1 v-show="source >= 60">及格</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const msg = "Hello World";
const msg2 = "<i>Hello World</i>";
const count = 10;
const doSomething = (msg) => {
  return `处理过后的${msg}`
}

const imgSrc = "https://img1.baidu.com/it/u=1893866658,1687958014&fm=253&app=138&f=JPEG?w=800&h=1067"

const number = ref(0)
const clickMe = () => {
  console.log('点击了我')
  number.value++
}
const clickMe10 = (num) => {
  console.log('点击了我')
  number.value += num
}

const isActive = ref(false)
const changeActive = () => {
  console.log('改变状态')
  isActive.value = !isActive.value
}

const styleObj = {
  color: 'red',
  fontSize: '20px'
}


const source = ref(50)
const changeSource = () => {
  source.value += 10
}

</script>

<style lang="css" scoped>
img {
  width: 200px;
  margin-right: 10px;
}

.title {
  color: red;
}
.active {
  text-decoration: underline;
}
</style>